<template>
    <el-row class="main">
        <el-col class="padd20 posa">
            <el-col class="box box-pack-start box-align-center">
                <span class="label tr">教研组长</span>
                <div class="btn">
                    <el-button class="reset-comfirm-btn" @click="addJyzUser('1')">+添加</el-button>
                </div>
            </el-col>
            <el-col class="mt20 tab">
                <el-table :data="jyzzlist" stripe :header-cell-style="{background:'#F0F1F8', color:'#2F3142'}" border>
                    <el-table-column type="index" label="序号" width="80" align="center"></el-table-column>
                    <el-table-column prop="name" label="姓名" width="300" align="center"></el-table-column>
                    <el-table-column prop="mobile" label="手机号" width="300" align="center"></el-table-column>
                    <el-table-column prop="zgh" label="职工号" align="center"></el-table-column>
                    <el-table-column label="操作" align="center" width="200">
                        <template slot-scope="scope">
                            <el-col class="box box-pack-center box-align-center">
                                <el-button icon="el-icon-delete" @click="handleDelete(scope.row,1)"></el-button>
                            </el-col>
                        </template>
                    </el-table-column>
                </el-table>
            </el-col>
            <el-col class="box box-pack-start box-align-center mt20">
                <span class="label tr">教研员</span>
                <div class="btn">
                    <el-button  class="reset-comfirm-btn" @click="addJyzUser('2')">+添加</el-button>
                </div>
            </el-col>
            <el-col class="mt20 tab">
                <el-table :data="jyyList" stripe :header-cell-style="{background:'#F0F1F8', color:'#2F3142'}" border>
                    <el-table-column type="index" label="序号" width="80" align="center"></el-table-column>
                    <el-table-column prop="name" label="姓名" width="300" align="center"></el-table-column>
                    <el-table-column prop="mobile" label="手机号" width="300" align="center"></el-table-column>
                    <el-table-column prop="zgh" label="职工号" align="center"></el-table-column>
                    <el-table-column label="操作" align="center" width="200">
                        <template slot-scope="scope">
                            <el-col class="box box-pack-center box-align-center">
                                <el-button icon="el-icon-delete" @click="handleDelete(scope.row,2)"></el-button>
                            </el-col>
                        </template>
                    </el-table-column>
                </el-table>
            </el-col>
        </el-col>

        <addJyzUser :dialogVisible="tkzt" :jyzId="jyzId" @update="getData()" :role="role" @closeTk="closeTk" ref="child"></addJyzUser>
    </el-row>
</template>

<script>
    import addJyzUser from '@/components/addJyzUser.vue'

    export default {
        components: {
            addJyzUser
        },
        data() {
            return {
                jyzId:0,
                jyzzlist:[],
                jyyList:[],
                role:"",
                tkzt:false,


                zShow: false,
                selectVal: 1,
                searchText: '',
                title: '添加',
                jyzlist: [],
                loginInfo: this.$store.state.loginInfo,
                current: 0,
                schoolid:this.$store.state.schoolId,
                role:this.$store.state.maxRole
            };
        },
        mounted() {
            this.getJyzData()
        },
        methods: {
            getData(e){
                this.getMemberData()
            },
            getJyzData() {
                let params = {
                    schoolid: this.schoolid
                };
                this.$api.Admin.getJyzData(params).then(res => {
                    if (res.code == '0') {
                        this.jyzId = res.data
                        this.getMemberData()
                    }
                })
            },
            getMemberData() {
                let params = {
                    schoolid: this.schoolid
                };
                this.$api.Admin.getMemberData(params).then(res => {
                    if (res.code == '0') {
                        this.jyzzlist = res.jyzz;
                        this.jyyList = res.jyyList;
                    }
                })
            },
            addJyzUser(role){
                this.role = role;
                this.$refs.child.listNotInJyzUser();
                this.tkzt = true;
            },
            closeTk() {
                this.tkzt = false;
            },
            handleDelete(item,role) {
                let params = {
                  jyzid:this.jyzId,
                  userid:item.id,
                  role:role
                };
                this.$confirm('确定将'+item.name + '移出教研组吗？', '提示', {
                        confirmButtonText: '确定',
                        cancelButtonText: '取消',
                        type: 'warning'
                      }).then(() => {
                          this.$api.Admin.delJyzUser(params).then(res => {
                              if (res.code == '0') {
                                  this.getMemberData();
                                  this.$message.success('操作成功！');
                              }
                          })
                      }).catch(() => {
                      });
            },
        }
    }
</script>

<style scoped lang="scss">
    .main {
        position: relative;
        height: 100%;
    }

    .posa {
        position: absolute;
        top: 0;
        left: 0;
        bottom: 0;
        width: 100%;
        overflow-y: auto;
        background-color: #fff;

        h3 {
            font-size: 18px;
        }

        .label {
            display: block;
            width: 76px;
            height: 40px;
            line-height: 40px;
            font-weight: 600;
            font-size: 15px;
            margin-right: 10px;
        }
        // .btn {
        //     width: 120px;
        //     height: 36px;
        //     line-height: 36px;
        //     background: #F3F4FB;
        //     border: 1px solid #626BF1;
        //     color: #626BF1;
        //     border-radius: 10px;
        //     cursor: pointer;
        //     font-size: 16px;

        // }
    }

    .tab {
        padding: 0 85px;
    }
    .height {
        height: 100%;
    }
    .el-table .warning-row {
        background: oldlace;
    }

    .el-table .success-row {
        background: #f0f9eb;
    }

    .delete-btn {
        display: block;
        padding: 3px 5px;
        width: 64px;
        height: 24px;
        line-height: 24px;
        background: linear-gradient(-13deg, #F97762, #F89F9F);
        border-radius: 12px;
        color: #fff;
    }
</style>
